<template>
	<view class="spec-container">
		<view v-for="(item, index) in goodsAttrArr" :key="index" class="spec-item">
			<view class="spec-title" @click="toggleLevel(item)">
				<text>{{item.type_name}}</text>
				<uni-icons 
					:type="expandedLevels.includes(item.type_id) ? 'down' : 'right'" 
					size="24" 
				></uni-icons>
			</view>
			<view class="spec-content" v-if="expandedLevels.includes(item.type_id)">
				<template v-for="(child, childIndex) in item.children" :key="childIndex">
					<view class="spec-group">
						<view class="group-title" @click="toggleLevel(child)">
							<text>{{child.type_name}}</text>
							<uni-icons 
								v-if="child.children && child.children.length > 0"
								:type="expandedLevels.includes(child.type_id) ? 'down' : 'right'" 
								size="24" 
							></uni-icons>
						</view>
						<view class="group-content" v-if="expandedLevels.includes(child.type_id)">
							<template v-for="(subChild, subIndex) in child.children" :key="subIndex">
								<view v-if="subChild.children && subChild.children.length > 0" class="spec-group">
									<view class="group-title" @click="toggleLevel(subChild)">
										<text>{{subChild.type_name}}</text>
										<uni-icons 
											:type="expandedLevels.includes(subChild.type_id) ? 'down' : 'right'" 
											size="24" 
										></uni-icons>
									</view>
									<view class="group-content" v-if="expandedLevels.includes(subChild.type_id)">
										<view v-for="(leafChild, leafIndex) in subChild.children" :key="leafIndex"
											class="spec-option"
											:class="{'active': isSelected(leafChild)}"
											@click="handleSelect(leafChild, subChild)">
											{{leafChild.type_name}}
											<text class="price">¥{{leafChild.price}}</text>
										</view>
									</view>
								</view>
								<view v-else
									class="spec-option"
									:class="{'active': isSelected(subChild)}"
									@click="handleSelect(subChild, child)">
									{{subChild.type_name}}
									<text class="price">¥{{subChild.price}}</text>
								</view>
							</template>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
	<view style="display: flex;justify-content: center; align-items: center;">
		<view style="flex: 1;background-color: black; color: #fff; height: 100rpx;text-align: center;line-height: 100rpx;" @click="handleConfirm(1)">独立购买附件</view>
		<view style="flex: 1;background-color: red;color: #fff;height: 100rpx;text-align: center;line-height: 100rpx;" @click="handleConfirm(0)">确定</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineModel,
		ref,
		watch,
		onMounted,
		defineEmits
	} from "vue"
	import {
		goodsAttachmentList
	} from "@/api/index.js"
	
	const props = defineProps(['id'])
	const goodsAttrArr = ref([])
	const selectedSpecs = ref([])
	const expandedLevels = ref([])
	const emit = defineEmits(['confirm'])
	
	// 切换展开/收起状态
	const toggleLevel = (item) => {
		const index = expandedLevels.value.indexOf(item.type_id)
		if (index > -1) {
			expandedLevels.value.splice(index, 1)
		} else {
			expandedLevels.value.push(item.type_id)
		}
	}
	
	// 检查规格是否被选中
	const isSelected = (spec) => {
		return selectedSpecs.value.some(item => item.type_id === spec.type_id)
	}
	
	// 获取同一分组下已选中的规格
	const getSelectedInGroup = (parentId) => {
		return selectedSpecs.value.find(item => item.parent_id === parentId)
	}
	
	// 处理规格选择
	const handleSelect = (spec, parent) => {
		console.log(parent,103)
		const isCurrentlySelected = isSelected(spec)
		
		// 如果当前规格已被选中，则取消选择
		if (isCurrentlySelected) {
			selectedSpecs.value = selectedSpecs.value.filter(item => item.type_id !== spec.type_id)
			return
		}
		
		// 获取同组下已选中的规格
		const selectedInGroup = getSelectedInGroup(parent.type_id)
		
		// 如果同组已有选中的规格，先移除
		if (selectedInGroup) {
			selectedSpecs.value = selectedSpecs.value.filter(item => item.type_id !== selectedInGroup.type_id)
		}
		spec.parent = parent
		// 添加新选中的规格
		selectedSpecs.value.push(spec)
	}
	
	// 处理确定按钮点击
	const handleConfirm = (type) => {
		console.log(selectedSpecs.value,125)
		emit('confirm', {data:selectedSpecs.value,type:type})
	}
	
	onMounted(()=>{
		goodsAttachmentList(props.id).then(e => {
			goodsAttrArr.value = e.data
			console.log(e.data,26)
		})
	})
	

</script>

<style>
.spec-container {
	padding: 20rpx;
	height: calc(80vh - 100rpx);
	overflow-y: scroll;
	background-color: #fff;
}

.spec-item {
	margin-bottom: 30rpx;
}

.spec-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background: #f8f8f8;
	border-radius: 8rpx;
}

.group-title {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 15rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx;
	background: #f5f5f5;
	border-radius: 6rpx;
}

.spec-group {
	margin-bottom: 20rpx;
	padding: 0 20rpx;
}

.group-content {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
	padding: 20rpx 0;
}

.spec-option {
	padding: 15rpx 30rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.spec-option.active {
	background: #007AFF;
	color: #fff;
}

.price {
	font-size: 24rpx;
	color: #ff6b6b;
}

.spec-option.active .price {
	color: #fff;
}
</style>